import Link from "next/link";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import type { ReactNode } from "react";
import { IMPORTANCE_WEIGHTS } from "@websensor/core/client";
import { DiffViewer } from "@/components/diff-viewer";
import { BookmarkButton } from "@/components/event-drawer";
import { EventRow } from "@/components/event-row";
import { FieldChangeInline, FieldChanges } from "@/components/field-changes";
import { Badge, Chip, Empty, EvidenceTag, ExtLink, Flag, Gauge, HealthPill, PageHeader, Panel, Score, StateBadge, Table, Td, TypeChip } from "@/components/ui";
import { ShareButton, WatchButton } from "@/components/watch-button";
import { api, SITE_URL, type SnapshotRow } from "@/lib/api";
import { CLASS_LABELS, fmtBytes, fmtMs, fmtOffset, fmtPct, fmtScore, relTime, shortHash, typeLabel, utcDateTime } from "@/lib/format";

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const d = await api.event(slug);
  if (!d) return { title: "Event not found" };
  const e = d.event;
  const desc = e.summary.slice(0, 200);
  return {
    title: e.title,
    description: desc,
    alternates: { canonical: `/event/${e.slug}` },
    openGraph: { type: "article", title: e.title, description: desc, url: `${SITE_URL}/event/${e.slug}`, publishedTime: e.detected_at, tags: [e.event_type, ...e.categories] },
    twitter: { card: "summary_large_image", title: e.title, description: desc },
  };
}

function Row({ label, value, tone = "" }: { label: string; value: ReactNode; tone?: string }) {
  return (
    <>
      <dt className="text-fg-subtle">{label}</dt>
      <dd className={`text-right font-mono tabular ${tone}`}>{value}</dd>
    </>
  );
}

function Cell({ v, l }: { v: number | string; l: string }) {
  return (
    <div className="rounded-md border border-line bg-panel-2 px-2 py-1.5 text-center">
      <div className="font-mono text-base font-semibold tabular">{v}</div>
      <div className="label !text-[9.5px]">{l}</div>
    </div>
  );
}

export default async function EventPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const d = await api.event(slug);
  if (!d) notFound();
  const e = d.event;
  const change = e.change_id ? await api.change(e.change_id) : null;
  const interp = (e.interpretation ?? {}) as Record<string, unknown>;
  const observed = typeof interp.observed === "string" ? interp.observed : null;
  const inferred = typeof interp.inferred === "string" && interp.inferred.trim() ? interp.inferred : null;
  const who = typeof interp.who_it_affects === "string" ? interp.who_it_affects : null;
  const model = typeof interp.model === "string" ? interp.model : "heuristics-v1";
  const oldSnap = d.snapshots.find((s) => s.id === e.old_snapshot_id);
  const newSnap = d.snapshots.find((s) => s.id === e.new_snapshot_id);
  const subject = e.entities.find((x) => x.role === "subject") ?? e.entities[0];
  const signal = e.signal_score ?? e.importance;
  const cluster = e.cluster;
  const clusterHref = cluster ? `/cluster/${cluster.slug ?? cluster.id}` : d.cluster ? `/cluster/${d.cluster.slug ?? d.cluster.id}` : null;
  const leadTime = cluster?.lead_time_ms ?? d.cluster?.lead_time_ms ?? null;
  const hasFields = (e.field_changes?.length ?? 0) > 0;
  const diffKind = change?.change.kind ?? d.change?.kind ?? null;
  const diffSummary = change?.change.diff ?? d.change?.diff ?? null;
  const defaultTab = diffKind === "text" ? "split" : "semantic";
  const reasons = e.score_reasons ?? [];
  const history = d.history ?? [];
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "NewsArticle",
    headline: e.title,
    description: e.summary,
    datePublished: e.detected_at,
    dateModified: e.processed_at ?? e.detected_at,
    url: `${SITE_URL}/event/${e.slug}`,
    mainEntityOfPage: `${SITE_URL}/event/${e.slug}`,
    image: [`${SITE_URL}/event/${e.slug}/opengraph-image`],
    author: { "@type": "Organization", name: "WebSensor", url: SITE_URL },
    publisher: { "@type": "Organization", name: "WebSensor", url: SITE_URL },
    about: e.entities.map((x) => ({ "@type": "Thing", name: x.name, url: `${SITE_URL}/entity/${x.id}` })),
    isBasedOn: e.url,
    keywords: [e.event_type, ...e.categories, ...e.keywords].join(", "),
  };
  const snapRows: [string, SnapshotRow | undefined][] = [
    ["Before", oldSnap],
    ["After", newSnap],
  ];
  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <PageHeader
        kicker={
          <span className="flex flex-wrap items-center gap-1.5">
            <Link href={`/source/${e.source?.id ?? e.source_id}`} className="font-mono text-[11px] font-semibold uppercase tracking-wide text-fg-muted hover:text-fg">{e.source?.name ?? e.source_id}</Link>
            {e.country && <Flag code={e.country} className="text-[12px]" />}
            <StateBadge state={cluster?.state} />
            {e.silent_change && <Badge kind="silent" />}
            {e.first_party === false ? <Badge kind="external" /> : <Badge kind="first-party" />}
            <EvidenceTag label={e.evidence_label} />
            <TypeChip type={e.event_type} href={`/live?event_type=${e.event_type}`} />
            {e.categories.map((c) => <Chip key={c} href={`/category/${c}`}>{c}</Chip>)}
          </span>
        }
        title={<span className="[overflow-wrap:anywhere]">{e.title}</span>}
        actions={
          <>
            <ShareButton path={`/event/${e.slug}`} />
            <BookmarkButton eventId={e.id} label />
            {subject && <WatchButton kind="entity" value={subject.id} label={`Watch ${subject.name}`} />}
            <Link href={subject ? `/alerts?entity=${encodeURIComponent(subject.id)}` : "/alerts"} className="inline-flex h-7 items-center rounded-md border border-line bg-panel px-2.5 text-[12px] hover:border-line-strong">Alert</Link>
          </>
        }
      />
      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_340px]">
        <div className="flex min-w-0 flex-col gap-4">
          {/* WHAT CHANGED */}
          <Panel title={<span>What changed{e.change_class && <span className="ml-2 normal-case tracking-normal text-fg-subtle">· {CLASS_LABELS[e.change_class] ?? e.change_class}</span>}</span>} action={<span className="font-mono text-[11px] text-fg-subtle tabular">{utcDateTime(e.detected_at)}</span>}>
            {hasFields ? (
              <>
                <FieldChanges items={e.field_changes} />
                <p className="mt-3 text-[13px] leading-relaxed text-fg-muted [overflow-wrap:anywhere]">{e.summary}</p>
              </>
            ) : (
              <p className="text-[15px] leading-relaxed [overflow-wrap:anywhere]">{e.summary}</p>
            )}
          </Panel>

          {/* BEFORE / AFTER */}
          <div id="diff" className="scroll-mt-16">
            <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
              <h2 className="label">Before / after{diffKind ? <span className="ml-2 normal-case tracking-normal text-fg-subtle">· {diffKind} diff</span> : null}</h2>
              <span className="flex flex-wrap gap-3 text-[11px] text-fg-subtle">
                {oldSnap && newSnap && <Link href={`/compare?a=${oldSnap.id}&b=${newSnap.id}`} className="hover:text-fg">open in compare →</Link>}
                <Link href={`/url?u=${encodeURIComponent(e.url)}`} className="hover:text-fg">URL history →</Link>
              </span>
            </div>
            {change || diffSummary ? (
              <DiffViewer unified={change?.unified ?? null} summary={diffSummary} defaultTab={defaultTab} />
            ) : (
              <Panel dense>
                <Empty>No diff is attached to this event{e.event_type === "page_removed" ? " — the page disappeared; its last snapshot is preserved below." : "."}</Empty>
              </Panel>
            )}
          </div>

          {/* WHY IT MATTERS */}
          <Panel title={<span>Why it matters <span className="normal-case tracking-normal text-fg-subtle">· analysis</span></span>}>
            {e.why_it_matters ? <p className="text-[13.5px] leading-relaxed">{e.why_it_matters}</p> : <p className="text-[13px] text-fg-subtle">No analysis was generated for this event; the observed change speaks for itself.</p>}
            <div className="mt-3 grid gap-3 sm:grid-cols-2">
              <div className="rounded-md border border-line bg-panel-2 p-3">
                <div className="label mb-1 !text-ok">Observed</div>
                <p className="text-[13px]">{observed ?? "Facts are limited to the diff above: the monitored endpoint changed between the two preserved snapshots."}</p>
              </div>
              <div className="rounded-md border border-line bg-panel-2 p-3">
                <div className="label mb-1 !text-info">Inferred</div>
                <p className="text-[13px] text-fg-muted">{inferred ?? "No inference beyond the observed change."}</p>
                <p className="mt-1 font-mono text-[11px] text-fg-subtle">confidence {fmtScore(e.confidence)} · {model}</p>
              </div>
            </div>
            {who && (
              <div className="mt-3">
                <div className="label mb-1">Who it affects</div>
                <p className="text-[13px] text-fg-muted">{who}</p>
              </div>
            )}
          </Panel>

          {/* EVIDENCE */}
          <Panel title="Evidence" dense>
            <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1 px-3 py-2 text-[13px]">
              <span className="label">Monitored URL</span>
              <ExtLink href={e.url} className="min-w-0 break-all font-mono text-[12.5px]">{e.url}</ExtLink>
            </div>
            <Table head={["Snapshot", "Captured", "HTTP", "Size", "Canonical hash", "Raw hash", ""]}>
              {snapRows.map(([label, snap]) => (
                <tr key={label}>
                  <Td className="font-medium">{label}</Td>
                  <Td mono className="whitespace-nowrap text-fg-subtle">{snap ? utcDateTime(snap.captured_at) : "—"}</Td>
                  <Td mono>{snap?.http_status ?? "—"}</Td>
                  <Td mono className="whitespace-nowrap">{snap ? fmtBytes(snap.content_length) : "—"}</Td>
                  <Td mono className="text-fg-subtle"><span title={snap?.canonical_hash ?? undefined}>{shortHash(snap?.canonical_hash)}</span></Td>
                  <Td mono className="text-fg-subtle"><span title={snap?.content_hash ?? undefined}>{shortHash(snap?.content_hash)}</span></Td>
                  <Td className="whitespace-nowrap">
                    {snap ? (
                      snap.has_raw === false ? (
                        <span className="text-fg-subtle" title="Raw body pruned by retention; canonical preserved">view raw · pruned</span>
                      ) : (
                        <a href={`/api/v1/snapshots/${snap.id}?raw=1`} target="_blank" rel="noopener noreferrer" className="text-info hover:underline">view raw</a>
                      )
                    ) : ""}
                  </Td>
                </tr>
              ))}
            </Table>
            {snapRows.some(([, s]) => s && s.has_raw === false) && <p className="px-3 pt-2 text-[11px] text-fg-subtle">Raw body pruned by retention; canonical preserved. Hashes and the canonical diff remain verifiable.</p>}
            <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 px-3 py-2 text-[12px]">
              <dt className="text-fg-subtle">Evidence hash</dt>
              <dd className="min-w-0 break-all font-mono text-fg-muted tabular">{newSnap?.canonical_hash ?? "—"}</dd>
              <dt className="text-fg-subtle">Sensor</dt>
              <dd className="min-w-0 truncate"><Link href={`/sensor/${e.sensor_id}`} className="text-info hover:underline">{e.sensor?.name ?? e.sensor_id}</Link> <span className="font-mono text-[11px] text-fg-subtle">{e.sensor?.type}{e.sensor?.connector ? ` · ${e.sensor.connector}` : ""}</span></dd>
              <dt className="text-fg-subtle">Trace</dt>
              <dd className="min-w-0 break-all font-mono text-[11px] text-fg-subtle">event {e.id} → change {e.change_id ?? "—"} → snapshots → sensor {e.sensor_id} → source {e.source_id}{e.processing_version ? ` · ${e.processing_version}` : ""}</dd>
            </dl>
            <div className="flex flex-wrap gap-3 border-t border-line px-3 py-2 text-[11.5px]">
              {oldSnap && newSnap && <Link href={`/compare?a=${oldSnap.id}&b=${newSnap.id}`} className="text-info hover:underline">Compare snapshots</Link>}
              <Link href={`/sensor/${e.sensor_id}`} className="text-info hover:underline">Sensor</Link>
              <Link href={`/url?u=${encodeURIComponent(e.url)}`} className="text-info hover:underline">URL history</Link>
              <Link href={`/source/${e.source?.id ?? e.source_id}`} className="text-info hover:underline">Source</Link>
            </div>
          </Panel>

          {/* HISTORICAL CONTEXT */}
          <Panel title={<span>Previous changes on this page <span className="font-mono text-fg-subtle">{history.length}</span></span>} dense>
            {history.length ? (
              <ul className="divide-y divide-line">
                {history.map((h) => (
                  <li key={h.id} className="grid grid-cols-[5.5rem_1fr_auto] items-start gap-2 px-3 py-1.5 text-[12.5px]">
                    <span className="font-mono text-[11px] text-fg-subtle tabular" title={utcDateTime(h.detected_at)}>{relTime(h.detected_at)}</span>
                    <div className="min-w-0">
                      <div className="flex flex-wrap items-center gap-1.5">
                        <Link href={`/event/${h.slug}`} className="min-w-0 truncate hover:underline">{h.title}</Link>
                        {h.silent_change && <Badge kind="silent" compact />}
                      </div>
                      <div className="mt-0.5 flex flex-wrap items-center gap-2 text-[11px] text-fg-subtle">
                        <span>{typeLabel(h.event_type)}</span>
                        {h.field_changes && h.field_changes.length > 0 && <FieldChangeInline items={h.field_changes} max={2} />}
                      </div>
                    </div>
                    <Score value={h.importance} size="sm" />
                  </li>
                ))}
              </ul>
            ) : (
              <Empty>First change observed on this URL.</Empty>
            )}
          </Panel>

          {/* RELATED SIGNALS */}
          <Panel title={<span>Related signals <span className="font-mono text-fg-subtle">{d.related.length}</span></span>} dense>
            {d.related.length ? d.related.map((r) => <EventRow key={r.id} ev={r} showDate />) : <Empty>No related signals yet.</Empty>}
          </Panel>

          {/* CLUSTER / PROPAGATION */}
          {(cluster || d.cluster) && (
            <Panel title="Event cluster · propagation" action={clusterHref && <Link href={clusterHref} className="text-[11px] text-info hover:underline">propagation timeline →</Link>}>
              {d.cluster?.title && <div className="mb-2 text-[13px] font-medium [overflow-wrap:anywhere]">{d.cluster.title}</div>}
              <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
                <Cell v={cluster?.event_count ?? d.cluster?.event_count ?? 1} l="signals" />
                <Cell v={cluster?.first_party_count ?? d.cluster?.first_party_count ?? 0} l="first-party" />
                <Cell v={cluster?.external_count ?? d.cluster?.external_count ?? 0} l="external" />
                <Cell v={cluster?.source_count ?? d.cluster?.source_count ?? 1} l="sources" />
              </div>
              {leadTime !== null && leadTime > 0 && (
                <p className="mt-3 rounded-md border border-signal/30 bg-signal-soft px-3 py-2 text-[12.5px]">
                  <span className="font-semibold text-signal">WebSensor lead time {fmtOffset(leadTime).replace("+", "")}</span> <span className="text-fg-muted">— the first-party change was observed before the first external report.</span>
                </p>
              )}
              <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11.5px] text-fg-subtle">
                {(cluster?.state ?? d.cluster?.state) && <span>state <span className="font-mono uppercase text-fg-muted">{cluster?.state ?? d.cluster?.state}</span></span>}
                {(cluster?.velocity ?? d.cluster?.velocity) !== undefined && <span>velocity <span className="font-mono text-fg-muted tabular">{Math.round(cluster?.velocity ?? d.cluster?.velocity ?? 0)}</span></span>}
                {d.cluster && <span>{relTime(d.cluster.first_at)} → {relTime(d.cluster.last_at)}</span>}
              </div>
              {d.cluster && d.cluster.entity_ids.length > 0 && <div className="mt-2 flex flex-wrap gap-1">{d.cluster.entity_ids.slice(0, 8).map((id) => <Chip key={id} href={`/entity/${id}`}>{id.replace(/^(org|prd|ent)_/, "")}</Chip>)}</div>}
            </Panel>
          )}
        </div>

        {/* RIGHT RAIL */}
        <aside className="flex min-w-0 flex-col gap-4">
          <Panel>
            <div className="flex items-center gap-3">
              <Score value={signal} size="lg" kind="signal" />
              <div className="min-w-0">
                <div className="label">WebSensor signal score</div>
                <div className="text-[12px] text-fg-muted">{signal >= 80 ? "attention now" : signal >= 60 ? "worth a look" : "informational"}</div>
              </div>
            </div>
            <div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-3">
              <Gauge label="Importance" value={e.importance} />
              <Gauge label="Confidence" value={e.confidence} tone="info" />
              <Gauge label="Novelty" value={e.novelty} tone="signal" />
              <Gauge label="Impact" value={e.impact_score} tone="high" />
              <Gauge label="Velocity" value={e.velocity_score} tone="silent" />
              <Gauge label="Anomaly" value={e.anomaly_score} tone="mid" />
            </div>
            <div className="mt-4">
              <div className="label mb-1.5">Why this score</div>
              {reasons.length ? (
                <ul className="divide-y divide-line rounded-md border border-line text-[12px]">
                  {reasons.map((r, i) => (
                    <li key={i} className="flex items-start gap-2 px-2 py-1">
                      <span className={`w-2 shrink-0 font-mono font-semibold ${r.sign === "+" ? "text-signal" : "text-danger"}`}>{r.sign}</span>
                      <span className="min-w-0 flex-1 text-fg-muted">{r.text}</span>
                      {r.points !== undefined && <span className={`shrink-0 font-mono tabular ${r.sign === "+" ? "text-signal" : "text-danger"}`}>{r.points > 0 ? "+" : ""}{r.points}</span>}
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="text-[12px] text-fg-subtle">Scored by heuristics only; no explicit adjustments were recorded for this event.</p>
              )}
            </div>
            {e.change_class && <div className="mt-3 text-[11.5px] text-fg-subtle">Semantic class <span className="font-medium text-fg-muted">{CLASS_LABELS[e.change_class] ?? e.change_class}</span></div>}
          </Panel>

          <Panel title="Importance components" dense>
            <Table head={["Component", "Weight", "Score"]}>
              {IMPORTANCE_WEIGHTS.map((w) => (
                <tr key={w.key}>
                  <Td>{w.label}</Td>
                  <Td mono className="text-fg-subtle">{w.weight}%</Td>
                  <Td mono>{e.importance_components?.[w.key] !== undefined ? fmtScore(e.importance_components[w.key]) : "—"}</Td>
                </tr>
              ))}
            </Table>
          </Panel>

          <Panel title="Timing">
            <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[12.5px]">
              <Row label="Published" value={e.published_at ? utcDateTime(e.published_at) : "—"} />
              <Row label="Observed from" value={e.observed_from ? utcDateTime(e.observed_from) : "—"} />
              <Row label="Detected" value={utcDateTime(e.detected_at)} />
              <Row label="Processed" value={e.processed_at ? utcDateTime(e.processed_at) : "—"} />
              <Row label="To feed" value={e.published_to_feed_at ? utcDateTime(e.published_to_feed_at) : "—"} />
              <Row label="Detection latency" value={fmtMs(e.detection_latency_ms)} />
              <Row label="Processing latency" value={fmtMs(e.processing_latency_ms)} />
              {leadTime !== null && leadTime > 0 && <Row label="WebSensor lead time" value={fmtOffset(leadTime).replace("+", "")} tone="text-signal font-semibold" />}
            </dl>
            <p className="mt-2 text-[11px] text-fg-subtle">{relTime(e.detected_at)} · all times UTC</p>
          </Panel>

          <Panel title="Entities" dense>
            {e.entities.length ? (
              <ul className="divide-y divide-line">
                {e.entities.map((x) => (
                  <li key={x.id} className="flex items-center justify-between gap-2 px-3 py-1.5 text-[13px]">
                    <Link href={`/entity/${x.id}`} className="min-w-0 truncate hover:underline">{x.name}</Link>
                    <span className="shrink-0 font-mono text-[11px] text-fg-subtle">{x.type}{x.role === "subject" ? " · subject" : ""}</span>
                  </li>
                ))}
              </ul>
            ) : (
              <Empty>No entity resolved.</Empty>
            )}
          </Panel>

          <Panel title="Source reliability">
            <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[12.5px]">
              <dt className="text-fg-subtle">Sensor health</dt><dd className="text-right"><HealthPill health={d.sensor_reliability?.health} /></dd>
              <Row label="Connector success" value={fmtPct(d.sensor_reliability?.success_rate ?? null)} />
              <Row label="Latency" value={fmtMs(d.sensor_reliability?.avg_latency_ms)} />
              <Row label="Runs" value={d.sensor_reliability?.total_runs ?? "—"} />
              <Row label="Raw / meaningful" value={`${d.sensor_reliability?.raw_changes ?? "—"} / ${d.sensor_reliability?.meaningful_changes ?? "—"}`} />
            </dl>
            <p className="mt-2 text-[11px] text-fg-subtle">Sensor type {e.sensor?.type} via {e.sensor?.connector ?? "—"} connector · tier {e.sensor?.tier ?? e.source?.tier ?? "—"}{e.first_party === false ? " · third-party report" : " · first-party channel"}</p>
          </Panel>

          <Panel title="Interpretation versions" dense>
            {d.interpretations.length ? (
              <ul className="divide-y divide-line">
                {d.interpretations.map((v) => (
                  <li key={v.version} className="flex items-center justify-between gap-2 px-3 py-1.5 text-[12.5px]">
                    <span>v{v.version} · <span className="font-mono">{v.model}</span></span>
                    <span className="font-mono text-[11px] text-fg-subtle">{utcDateTime(v.created_at)}</span>
                  </li>
                ))}
              </ul>
            ) : (
              <p className="px-3 py-2 text-[12px] text-fg-subtle">Heuristic interpretation only ({model}).</p>
            )}
            <p className="border-t border-line px-3 py-2 text-[11px] text-fg-subtle">Raw evidence is immutable; interpretations may be reprocessed and are versioned.</p>
          </Panel>

          {e.keywords.length > 0 && (
            <Panel title="Keywords">
              <div className="flex flex-wrap gap-1">{e.keywords.map((k) => <Chip key={k} href={`/search?q=${encodeURIComponent(k)}`}>{k}</Chip>)}</div>
            </Panel>
          )}
          <p className="text-[11px] text-fg-subtle">{typeLabel(e.event_type)} · detected by WebSensor · AI-generated analysis never replaces the original evidence above.</p>
        </aside>
      </div>
    </>
  );
}